<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>map</title>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <script>
        var p=document.querySelectorAll('p');
        const y1=new Map(
            [
                ['color','red'],
                ['backgroundColor','yellow']
            ]
        );
        const y2=new Map(
            [
                ['color','green'],
                ['backgroundColor','red']
            ]
        );
        const y3=new Map(
            [
                ['color','pink'],
                ['backgroundColor','gold']
            ]
        );
        const x=new Map(
            [
                [p[0],y1],
                [p[1],y2],
                [p[2],y3]
            ]
        )
        x.forEach((color,key)=>{
            color.forEach((color1,key1,)=>{
                key.style[key1]=color1;
            })
        })
    </script>
</body>
</html>